﻿<UserControl x:Class="Passwords.Views.PasswordsView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:utils="clr-namespace:Passwords.Utils"
        xmlns:models="clr-namespace:Passwords.Models" xmlns:vm="clr-namespace:Passwords.ViewModels"
        xmlns:controls="clr-namespace:Passwords.Controls" mc:Ignorable="d" d:DesignHeight="300"             
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        d:DesignWidth="706">
    <UserControl.InputBindings>
        <KeyBinding Key="Enter" Modifiers="Ctrl" Command="{x:Static vm:Commands.EditPasswordCommand}" />
        <KeyBinding Key="F2" Command="{x:Static vm:Commands.EditPasswordCommand}" />
        <KeyBinding Key="N" Modifiers="Ctrl" Command="{x:Static vm:Commands.NewPasswordCommand}" />
        <KeyBinding Key="F7" Command="{x:Static vm:Commands.DeletePasswordCommand}" />
        <KeyBinding Key="Del" Modifiers="Ctrl" Command="{x:Static vm:Commands.DeletePasswordCommand}" />
        <KeyBinding Key="C" Modifiers="Alt" Command="{x:Static vm:Commands.CategoriesCommand}" />
        <KeyBinding Key="F" Modifiers="Ctrl" Command="{x:Static vm:Commands.BeginSearch}"/>
    </UserControl.InputBindings>
    <UserControl.Resources>
        <utils:DoubleToVisibleConverter x:Key="doubleToVisible" Trigger="760" />
        <utils:DoubleToVisibleConverter x:Key="doubleToVisible2" Trigger="550" />

        <ControlTemplate TargetType="{x:Type UserControl}" x:Key="template">
            <ControlTemplate.Resources>
                <ExponentialEase x:Key="easeOut" EasingMode="EaseOut" Exponent="5.0" />
                <ExponentialEase x:Key="easeIn" EasingMode="EaseIn" Exponent="5.0" />
            </ControlTemplate.Resources>
            <Grid Margin="0,0,10,0" x:Name="grid" Background="{TemplateBinding Background}">
                <Grid.Resources>
                    <Style TargetType="RadioButton" BasedOn="{StaticResource textRadioStyle}" >
                        <Setter Property="VerticalAlignment" Value="Center"/>
                    </Style>
                    <Style TargetType="Button" BasedOn="{StaticResource iconButtonStyle}" />
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="70" />
                    <RowDefinition Height="0" />
                    <RowDefinition Height="0" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <!--<ColumnDefinition x:Name="PasswordsLeft" Width="{Binding Settings.PasswordsLeft,  FallbackValue=160}"  />-->
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition x:Name="passwordsColumn" Width="*" />
                    <ColumnDefinition x:Name="detailsColumn" Width="420" />
                    <!--<ColumnDefinition x:Name="PasswordsRight" Width="{Binding Settings.PasswordsRight, FallbackValue=*}" MaxWidth="430" />-->
                    <!--<ColumnDefinition x:Name="PasswordsRight" Width="{Binding Settings.PasswordsRight, FallbackValue=400}" />-->
                </Grid.ColumnDefinitions>

                <!--Header: -->
                <Grid Grid.ColumnSpan="3" Grid.Row="0" Margin="10,5,0,-5">
                    <Grid.Resources>
                        <Style TargetType="RadioButton" BasedOn="{StaticResource buttonRadioStyle}" />

                    </Grid.Resources>
                    <TextBlock Text="{Binding rs.PasswordsTitle, Source={StaticResource locale}}" FontSize="48" FontWeight="Light" VerticalAlignment="Top"
                                        Margin="0,-25,25,20" />

                    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"
                                        HorizontalAlignment="Left" Margin="0,5,0,12" IsManipulationEnabled="True"
                                        x:Name="tabPanel">
                        <StackPanel.Resources>
                            <Style TargetType="Button">
                                <Setter Property="Foreground" Value="{DynamicResource AppForeground}" />
                                <Setter Property="FontSize" Value="10" />
                                <Setter Property="FontWeight" Value="Bold" />
                                <Setter Property="Margin" Value="0,0,16,0" />
                                <Setter Property="ClickMode" Value="Press" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Border Margin="{TemplateBinding Padding}">
                                                <ContentControl Content="{TemplateBinding Content}"
                                                                    VerticalAlignment="Top" HorizontalAlignment="Left" />
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </StackPanel.Resources>
                        <RadioButton x:Name="alpha" Content="{Binding rs.AlphabeticBtn, Source={StaticResource locale}}"
                                            Style="{StaticResource textRadioStyle}"
                                            IsChecked="{Binding DisplayMode, Converter={StaticResource modeToBool}, ConverterParameter={x:Static models:DisplayMode.Passwords}}">
                            <RadioButton.RenderTransform>
                                <TranslateTransform />
                            </RadioButton.RenderTransform>
                        </RadioButton>
                        <Separator Style="{StaticResource lineSepStyle}" x:Name="catsSep">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>
                        </Separator>
                        <RadioButton x:Name="cats" Content="{Binding rs.CategoriesBtn, Source={StaticResource locale}}"
                                            Style="{StaticResource textRadioStyle}"
                                            IsChecked="{Binding DisplayMode, Converter={StaticResource modeToBool}, ConverterParameter={x:Static models:DisplayMode.Categories}}">
                            <RadioButton.RenderTransform>
                                <TranslateTransform />
                            </RadioButton.RenderTransform>
                        </RadioButton>
                        <Separator Style="{StaticResource lineSepStyle}" x:Name="favesSep">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>
                        </Separator>
                        <RadioButton x:Name="faves" Content="{Binding rs.FavoritesBtn, Source={StaticResource locale}}"
                                            Style="{StaticResource textRadioStyle}"
                                            IsChecked="{Binding DisplayMode, Converter={StaticResource modeToBool}, ConverterParameter={x:Static models:DisplayMode.Favorites}}">
                            <RadioButton.RenderTransform>
                                <TranslateTransform />
                            </RadioButton.RenderTransform>
                        </RadioButton>
                    </StackPanel>
                    <Grid x:Name="findBox" Width="200" HorizontalAlignment="Right"
                                        VerticalAlignment="Bottom" Margin="0,35,0,10">
                        <TextBox x:Name="searchBox" Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}">
                            <TextBox.InputBindings>
                                <KeyBinding Key="Esc" Command="{x:Static vm:Commands.CancelSearch}"/>
                            </TextBox.InputBindings>
                        </TextBox>
                        <Image x:Name="searchImg" HorizontalAlignment="Right" Margin="4,0,0,0" Width="24" Height="24" 
                               Source="/Passwords;component/Images/dark.appbar.feature.search.rest.png">
                            <Image.InputBindings>
                                <MouseBinding Gesture="LeftClick" Command="{x:Static vm:Commands.BeginSearch}"/>
                            </Image.InputBindings>
                        </Image>
                        <Image x:Name="exitSearch" HorizontalAlignment="Right" Margin="4,0,0,0" Width="24" Height="24" 
                               Source="/Passwords;component/DarkImages/appbar.cancel.rest.png" Visibility="Collapsed">
                            <Image.InputBindings>
                                <MouseBinding Gesture="LeftClick" Command="{x:Static vm:Commands.CancelSearch}"/>
                            </Image.InputBindings>
                        </Image>
                    </Grid>
                    <StackPanel x:Name="appButtonPanel" VerticalAlignment="Top" HorizontalAlignment="Right"
                                        Margin="0,0,-4,0" Orientation="Horizontal">
                        <RadioButton x:Name="editCategoriesBtn" Content="{Binding rs.EditCategoriesBtn, Source={StaticResource locale}}"
                                            IsChecked="{Binding AppDisplayMode, Converter={StaticResource appModeToBool}, ConverterParameter={x:Static models:AppDisplayMode.Categories}}">
                            <RadioButton.RenderTransform>
                                <TranslateTransform />
                            </RadioButton.RenderTransform>
                        </RadioButton>
                        <Separator Style="{StaticResource lineSepStyle}" x:Name="settingsSep">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>
                        </Separator>
                        <RadioButton x:Name="settingsBtn" Content="{Binding rs.SettingsBtn, Source={StaticResource locale}}"
                                            IsChecked="{Binding AppDisplayMode, Converter={StaticResource appModeToBool}, ConverterParameter={x:Static models:AppDisplayMode.Settings}}">
                            <RadioButton.RenderTransform>
                                <TranslateTransform />
                            </RadioButton.RenderTransform>
                        </RadioButton>
                        <Separator Style="{StaticResource lineSepStyle}" x:Name="logoutSep">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>

                        </Separator>
                        <Button x:Name="logoutBtn" Content="{Binding rs.LogoutBtn, Source={StaticResource locale}}" VerticalAlignment="Center"
                                            Style="{StaticResource radioLikeButtonStyle}"
                                            Command="{x:Static vm:Commands.LogoutCommand}">
                            <Button.RenderTransform>
                                <TranslateTransform />
                            </Button.RenderTransform>
                        </Button>
                    </StackPanel>
                </Grid>

                <!--Group Headers:-->
                <Border Grid.Row="3" Background="{DynamicResource TransparentChromeBrush}" Margin="4,0,4,0"
                                    Visibility="{Binding ActualWidth, ElementName=grid, Converter={StaticResource doubleToVisible}}">
                    <TextBlock Text="{Binding rs.CategoriesColumn, Source={StaticResource locale}}" Style="{StaticResource headerText}" />
                </Border>

                <Grid x:Name="PwHeader" Grid.Column="1" Grid.Row="3"
                                    Background="{DynamicResource TransparentChromeBrush}" Margin="4,0,4,0">
                    <TextBlock Grid.Column="0" Text="{Binding rs.SearchResult, Source={StaticResource locale}}" Style="{StaticResource headerText}"
                                        Visibility="{Binding DisplayMode, Converter={StaticResource modeToVis},ConverterParameter={x:Static models:DisplayMode.Search}}" />
                    <TextBlock Grid.Column="0" Text="{Binding rs.AllPasswordsColumn, Source={StaticResource locale}}" Style="{StaticResource headerText}"
                                        Visibility="{Binding DisplayMode, Converter={StaticResource modeToVis},ConverterParameter={x:Static models:DisplayMode.Passwords}}" />
                    <!--<TextBlock Grid.Column="0" Text="{Binding SelectedItem.Name, ElementName=categoryList}" Style="{StaticResource headerText}" Visibility="{Binding DisplayMode, Converter={StaticResource modeToVis},ConverterParameter={x:Static models:DisplayMode.Categories}}"/>-->
                    <ComboBox Grid.Column="0" Padding="9,0,9,0" BorderThickness="1"
                                          FontSize="18" Background="Transparent"   Foreground="{DynamicResource AppForeground}"                      
                                        SelectedItem="{Binding SelectedCategory}" DisplayMemberPath="Name"
                                        ItemsSource="{Binding Categories}"
                                        Visibility="{Binding DisplayMode, Converter={StaticResource modeToVis},ConverterParameter={x:Static models:DisplayMode.Categories}}" />

                    <TextBlock Grid.Column="0" Text="{Binding rs.FavoritesText, Source={StaticResource locale}}" Style="{StaticResource headerText}"
                                        Visibility="{Binding DisplayMode, Converter={StaticResource modeToVis},ConverterParameter={x:Static models:DisplayMode.Favorites}}" />
                </Grid>

                <Grid Grid.Column="2" Grid.Row="3" x:Name="passwordControlPanel" Margin="5,0,0,0" 
                                    Background="{DynamicResource TransparentChromeBrush}">

                    <StackPanel x:Name="passwordPanel" Grid.Column="1" Orientation="Horizontal"
                                        HorizontalAlignment="Left" VerticalAlignment="Center" Margin="4,0,4,0"
                                        Visibility="{Binding IsPasswordSelected, Converter={StaticResource boolToVisible}}">
                        <StackPanel.Resources>
                            <Style TargetType="Button" BasedOn="{StaticResource textButtonStyle}" />
                        </StackPanel.Resources>
                        <Button x:Name="deleteBtn" Content="{Binding rs.DeleteBtn, Source={StaticResource locale}}"
                                            Command="{x:Static vm:Commands.DeletePasswordCommand}">
                            <Button.RenderTransform>
                                <TranslateTransform />
                            </Button.RenderTransform>
                        </Button>
                        <Separator x:Name="editSep" Style="{StaticResource lineSepStyle}">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>
                        </Separator>
                        <Button x:Name="editBtn" Content="{Binding rs.EditBtn, Source={StaticResource locale}}"
                                            Command="{x:Static vm:Commands.EditPasswordCommand}">
                            <Button.RenderTransform>
                                <TranslateTransform />
                            </Button.RenderTransform>
                        </Button>
                        <Separator x:Name="faveSep" Style="{StaticResource lineSepStyle}">
                            <Separator.RenderTransform>
                                <TranslateTransform />
                            </Separator.RenderTransform>
                        </Separator>
                        <Grid x:Name="faveGrid">
                            <Button x:Name="addFaveBtn" Content="{Binding rs.AddToFavesBtn, Source={StaticResource locale}}"
                                                Command="{x:Static vm:Commands.ToggleFaveCommand}" />
                            <Button x:Name="removeFaveBtn" Content="{Binding rs.RemoveFromFavesBtn, Source={StaticResource locale}}"
                                                Command="{x:Static vm:Commands.ToggleFaveCommand}" />
                            <Grid.RenderTransform>
                                <TranslateTransform />
                            </Grid.RenderTransform>
                        </Grid>

                    </StackPanel>
                </Grid>


                <!--Group Content:-->
                <!--    selection View-->
                <Border Margin="4,0" Grid.Row="4" BorderThickness="0,0,1,0" BorderBrush="{DynamicResource TransparentChromeBrush}"
                        Visibility="{Binding ActualWidth, ElementName=grid, Converter={StaticResource doubleToVisible}}"
                        MinWidth="150">
                    <Grid x:Name="selectionPanel" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <RadioButton Content="{Binding rs.AllBtn, Source={StaticResource locale}}" Style="{StaticResource itemRadioStyle}" Opacity="1"
                                        Padding="-1,4,4,3"
                                        IsChecked="{Binding DisplayMode, Converter={StaticResource modeToBool}, ConverterParameter={x:Static models:DisplayMode.Passwords}}">
                            <RadioButton.Tag>
                                <TextBlock Text="{Binding Passwords.Count}" FontSize="10" Foreground="White" />
                            </RadioButton.Tag>
                        </RadioButton>
                        <RadioButton Grid.Row="1" Content="{Binding rs.FavoritesBtn, Source={StaticResource locale}}" Style="{StaticResource itemRadioStyle}"
                                        Opacity="1" Padding="-1,1,4,1"
                                        IsChecked="{Binding DisplayMode, Converter={StaticResource modeToBool}, ConverterParameter={x:Static models:DisplayMode.Favorites}}">
                            <RadioButton.Tag>
                                <Image Source="/Passwords;component/Images/appbar.favs.rest.png" />
                            </RadioButton.Tag>
                        </RadioButton>

                        <ListBox x:Name="categoryList" Grid.Row="2" ScrollViewer.CanContentScroll="False"
                                         MaxWidth="240"
                                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                        SelectedItem="{Binding SelectedCategory}" ItemsSource="{Binding Categories}"
                                        ItemTemplate="{StaticResource categoryTemplate}">
                        </ListBox>
                    </Grid>
                </Border>

                <!--    Passwords View-->
                <Border Margin="4,0" Grid.Row="4" Grid.Column="1" BorderThickness="0,0,1,0" BorderBrush="{DynamicResource TransparentChromeBrush}">
                    <ListBox x:Name="passwordList"  
                                    ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                    VerticalAlignment="Top" HorizontalAlignment="Stretch"
                                    SelectedItem="{Binding SelectedPassword, Mode=TwoWay}"
                                    ItemTemplate="{StaticResource passwordTemplate}" 
                                    ItemsSource="{Binding SelectedPasswords}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <controls:TilePanel x:Name="pwListPanel" IsItemsHost="True" >
                                    <i:Interaction.Behaviors>
                                        <ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.15" EaseX="{StaticResource fluidEase}" EaseY="{StaticResource fluidEase}" FloatAbove="True"/>
                                    </i:Interaction.Behaviors>
                                </controls:TilePanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                </Border>

                <!--    Detail View-->
                <Border Margin="5,0,0,2" Grid.Column="2" Grid.Row="4">
                    <ScrollViewer Grid.Column="2" Grid.Row="4" HorizontalScrollBarVisibility="Disabled"
                                    x:Name="detailsView" VerticalScrollBarVisibility="Auto" 
                                    ScrollViewer.CanContentScroll="False">
                        <Grid x:Name="detailsView2" >
                            <!--<Grid.Effect>
                            <DropShadowEffect Opacity="0.7" BlurRadius="10"/>
                        </Grid.Effect>-->
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <ItemsControl x:Name="selectedCategories" Grid.RowSpan="2" Focusable="False"
                                            HorizontalAlignment="Right" Margin="5,10,5,5"
                                            ItemsSource="{Binding SelectedPassword.Categories}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}" HorizontalAlignment="Right"
                                                        FontSize="9" SnapsToDevicePixels="True" Opacity="0.60" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                            <Border Grid.Row="0" Margin="0,10,0,0">
                                <TextBlock Text="{Binding SelectedItem.Name, ElementName=passwordList}"
                                                Style="{StaticResource headerText}" TextTrimming="CharacterEllipsis" />
                            </Border>
                            <ItemsControl x:Name="fieldList" Grid.Row="1" Margin="10,6,10,5" Focusable="False"
                                            ItemsSource="{Binding SelectedPassword.Fields}"
                                            ItemTemplate="{StaticResource fieldTemplate}" />
                        </Grid>
                    </ScrollViewer>
                </Border>

                <!--Footer:-->
                <Border BorderThickness="0,1,0,0" Grid.Row="5" Grid.ColumnSpan="3" BorderBrush="{DynamicResource TransparentChromeBrush}">
                    <Grid x:Name="appPanel"  Margin="10,8,10,0">
                        <Grid.Resources>
                            <Style TargetType="Button" BasedOn="{StaticResource textButtonStyle}">
                                <Setter Property="FontSize" Value="14" />
                            </Style>
                        </Grid.Resources>
                        <StackPanel  HorizontalAlignment="Center" Orientation="Horizontal">
                            <Button Content="{Binding rs.DeleteBtn, Source={StaticResource locale}}" Command="{x:Static vm:Commands.DeletePasswordCommand}" />
                            <Separator Style="{StaticResource lineSepStyle}" />
                            <Button x:Name="newPasswordBtn" Content="{Binding rs.NewBtn, Source={StaticResource locale}}"
                                        Command="{x:Static vm:Commands.NewPasswordCommand}" />
                            <Separator Style="{StaticResource lineSepStyle}" />
                            <Button Content="{Binding rs.EditBtn, Source={StaticResource locale}}" Command="{x:Static vm:Commands.EditPasswordCommand}" />
                        </StackPanel>
                        <Button x:Name="backupBtn" Content="{Binding rs.BackupBtn, Source={StaticResource locale}}"  HorizontalAlignment="Left"  Command="{x:Static vm:BackupCommands.Backup}"/>
                        <Grid.RenderTransform>
                            <TranslateTransform x:Name="footerTransform"/>
                        </Grid.RenderTransform>
                    </Grid>
                </Border>

                <!--<GridSplitter Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Width="5" Background="Transparent" Focusable="False" />-->
                <!--<GridSplitter Grid.Column="1" Grid.Row="3" Grid.RowSpan="2" Width="5" Background="Transparent" Focusable="False"/>-->
            </Grid>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSearchEmpty}" Value="false">
                    <Setter Property="Visibility" Value="Collapsed" TargetName="searchImg"/>
                    <Setter Property="Visibility" Value="Visible" TargetName="exitSearch"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding DisplayMode}" Value="{x:Static models:DisplayMode.Search}">
                    <Setter Property="controls:FocusContainer.IsFocused" Value="true" TargetName="searchBox"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding SelectedPassword.IsFavorite}" Value="false">
                    <Setter Property="Visibility" Value="Collapsed" TargetName="removeFaveBtn" />
                    <Setter Property="Visibility" Value="Visible" TargetName="addFaveBtn" />
                </DataTrigger>

                <DataTrigger Binding="{Binding SelectedPassword.IsFavorite}" Value="true">
                    <Setter Property="Visibility" Value="Visible" TargetName="removeFaveBtn" />
                    <Setter Property="Visibility" Value="Collapsed" TargetName="addFaveBtn" />
                </DataTrigger>

                <DataTrigger Binding="{Binding SelectedPassword}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Visible" TargetName="removeFaveBtn" />
                    <Setter Property="Visibility" Value="Collapsed" TargetName="addFaveBtn" />
                </DataTrigger>

                <DataTrigger Binding="{Binding IsPasswordSelected}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="isPasswordSelectedStoryboard">
                            <Storyboard>
                                <DoubleAnimation From="0" To="1" Storyboard.TargetName="passwordPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-40" To="0" Storyboard.TargetName="faveGrid"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-32" To="0" Storyboard.TargetName="faveSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-24" To="0" Storyboard.TargetName="editBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-16" To="0" Storyboard.TargetName="editSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-8" To="0" Storyboard.TargetName="deleteBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                    Storyboard.TargetName="passwordPanel" Duration="0:0:0">
                                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                            Value="{x:Static Visibility.Visible}" />
                                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <!--<RemoveStoryboard BeginStoryboardName="isPasswordSelectedStoryboard"/>-->
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0" Storyboard.TargetName="passwordPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation To="-40" Storyboard.TargetName="faveGrid"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation To="-32" Storyboard.TargetName="faveSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeIn}" />
                                <DoubleAnimation To="-24" Storyboard.TargetName="editBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation To="-16" Storyboard.TargetName="editSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeIn}" />
                                <DoubleAnimation To="-8" Storyboard.TargetName="deleteBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:0.5"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                    Storyboard.TargetName="passwordPanel" Duration="0:0:0.5">
                                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5"
                                                            Value="{x:Static Visibility.Collapsed}" />
                                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>

                <DataTrigger Binding="{Binding AppDisplayMode}" Value="{x:Static models:AppDisplayMode.Passwords}">
                    <DataTrigger.EnterActions>
                        <!--<RemoveStoryboard BeginStoryboardName="hiddenStoryboard"/>-->
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="footerTransform" Storyboard.TargetProperty="Y" From="80" To="0" EasingFunction="{StaticResource easeOut}" Duration="0:0:0.25"/>
                                <DoubleAnimation From="0" To="1" Storyboard.TargetName="appPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="0" To="1" Storyboard.TargetName="findBox"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:2"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="0" To="1" Storyboard.TargetName="tabPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-8" To="0" Storyboard.TargetName="alpha"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-16" To="0" Storyboard.TargetName="catsSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-24" To="0" Storyboard.TargetName="cats"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-32" To="0" Storyboard.TargetName="favesSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="-40" To="0" Storyboard.TargetName="faves"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />

                                <DoubleAnimation From="0" To="1"
                                                    Storyboard.TargetName="passwordControlPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:2"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="0" To="1" Storyboard.TargetName="appButtonPanel"
                                                    Storyboard.TargetProperty="Opacity" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="40" To="0" Storyboard.TargetName="editCategoriesBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="32" To="0" Storyboard.TargetName="settingsSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="24" To="0" Storyboard.TargetName="settingsBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="16" To="0" Storyboard.TargetName="logoutSep"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                                <DoubleAnimation From="8" To="0" Storyboard.TargetName="logoutBtn"
                                                    Storyboard.TargetProperty="RenderTransform.X" Duration="0:0:1"
                                                    EasingFunction="{StaticResource easeOut}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <Setter Property="controls:FocusContainer.IsFocused" Value="true"  TargetName="passwordList" />
                </DataTrigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

    </UserControl.Resources>
    <UserControl.Style>
        <Style TargetType="UserControl">
            <Style.Triggers>
                <DataTrigger Binding="{Binding AppDisplayMode}" Value="{x:Static models:AppDisplayMode.Passwords}" >
                    <Setter Property="Template" Value="{StaticResource template}"/>
                </DataTrigger>

                <DataTrigger
                        Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}, Converter={StaticResource doubleToVisible2}}"
                        Value="{x:Static Visibility.Collapsed}">
                    <DataTrigger.Setters>
                        <Setter Property="Template" Value="{DynamicResource CompactPasswordsTemplate}" />
                    </DataTrigger.Setters>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
</UserControl>
